
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<base href="<%=basePath%>">
		<!--[if lte IE 6]></base><![endif]-->
		<title>广东科学技术职业学院考生报到系统<s:property
				value="%{#session.college.collegesName}" /></title>
		<link href="css/newindex.css" rel="stylesheet" type="text/css" />

		<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
		<script src="js/jquery-1.5.js" language="javascript">
</script>
		<script src="js/newpublic.js" language="javascript">
</script>
		<script src="js/table.js" language="javascript">
</script>

		<script src="js/jquery-ui-1.8.5.custom.min.js" language="javascript">
</script>
		<script src="js/visualize.jQuery.js" language="javascript">
</script>
		<link rel="stylesheet" href="css/jquery-ui-1.8.5.custom.css"
			type="text/css" />
		<link rel="stylesheet" href="css/visualize.jQuery.css" type="text/css"></link>

		<style type="text/css">
.statisticsdata td,th {
	text-align: center;
	border: 1px solid #ddd;
	padding: 2px 5px;
	font-size: 1.0em;
	padding: 2px;
	width: 8%;
	height: 30px
}

.statisticsdata td,th {
	background-color: #f4f4f4;
}

.statisticsdata th {
	background-color: #E5E4FF;
}

.visualize-bar {
	margin-left: auto;
	margin-right: auto;
	margin-top: 70px;
	/*margin-bottom: 200px*/
}

.visualize .visualize-info {
	top: -60px;
}

legend {
	font-size: 3.2em;
}
</style>
		<script language="javascript">
$(function() {

	//make some charts
	//$('#Statisticsdata').visualize({type: 'pie', pieMargin: 10, title: '2009 Total Sales by Individual'});	
	//$('#Statisticsdata').visualize({type: 'line'});
	//$('#Statisticsdata').visualize({type: 'area'});

});

$(function() {
$("#content").draggable({cancel:".contable"});
$('#Statisticsdata').visualize({height:300,colors:["#B0F274","#FF9E7A"]});
	var result=<s:property value='result' escape="false"/>;
	fillResult(result)
	//加载学院下拉列表
	loadColleges();
	//初始化专业下拉列表
	loadProfession($("#collegesList").val())
	$("#collegesList").change(function() {

		loadProfession($("#collegesList").val())
		$("#professionsList").trigger("change")
		//初始化班级列表
			loadClasses($("#professionsList").val())
			$("#professionsList").change(function() {
				loadClasses($("#professionsList").val())
			})
			/*$("select").each(function() {//全部默认选择第一项
						$(this).children().first().attr("selected", "selected")

			})*/

		})
	initChartTitle()
})
//加载学院下拉列表
function loadColleges() {
	var colleges=<s:property value="colleges" escape="false"/>
			
			$("select#collegesList option").remove();
			setTimeout(function(){//ie6不得不这样写
				$("#collegesList").append("<option value=''>全部学院</option>")
				for(c in colleges){
					$("select#collegesList").append("<option value='"+c+"'>"+colleges[c]+"</option>")
				}
				$("#collegesList").trigger("change")
			},0.001)
			
		}
		function loadProfession(collegeId){
			$("select#professionsList option").remove();
			var professionMap=<s:property value="professions" escape="false"/>
			var professions=professionMap[collegeId];
			$("#professionsList").append("<option value=''>所有专业</option>")
			for(var p in professions){
				$("#professionsList").append("<option value='"+p+"'>"+professions[p]+"</option>")
			}
		}
		function loadClasses(professionId){
			var classes=<s:property value="classes" escape="false"/>
			$("#classesList option").remove();
			$("#classesList").append("<option value='0'>全部班级</option>")
			for(var i=1;i<=classes[professionId];i++){
				$("#classesList").append("<option value='"+i+"'>"+i+"</option>")
			}
		}
		function loadInfo(){
			var professionId=$("#professionsList").val();
			var collegeId=$("#collegesList").val();
			var clazz=$("#classesList").val();
			var subjectId=$("#subject").val();
			var param={};
			if(professionId!=""){
				param.professionId=professionId;
			}
			if(collegeId!=""){
				param.collegeId=collegeId;
			}
			if(clazz!=""){
				param.clazz=clazz;
			}
			if(subjectId!=""){
				param.subjectId=subjectId;
			}
			$.post("json/scoreStatisticsAction",param,function(data){
					initChartTitle()
					fillResult(eval("("+data.result+")"))
			})
		}
		//初始化图表的标题
		function initChartTitle(){
		
			var professionId=$("#professionsList").val();
			var collegeId=$("#collegesList").val();
			var clazz=$("#classesList").val();
			var subjectId=$("#subject").val();
			
			var title="";
			var collegeName=$.trim($("#collegesList option:selected").html());
			var professionName=$.trim($("#professionsList option:selected").html());
			var clazzName=$.trim($("#classesList option:selected").html());
			var subject=$.trim($("#subject option:selected").html());
			if(collegeId!=""){
				title+=collegeName+" ";
			}
			if(professionId!=""){
				title+=professionName+" ";
			}
			if(clazz!=0){
				title+=clazzName+"班 ";
			}
			if(subjectId!=""){
				title+=subject;
			}
			$("#chartTitle").html(title+"分数段统计")
		}
		
		function fillResult(data){
			
			var j=0;
			$.each(data,function(i,v){
				$("tr#scoreRange th:eq("+j+")").html(i);
				$("tr#totalNumber td:eq("+j+")").html(v.all)
				$("tr#registedNumber td:eq("+j+")").html(v.registed)
				j++;
			})
		
			$('.visualize').trigger('visualizeRefresh');

		}
</script>
	</head>
	<body onload="fixPNGAll()">

		<div id="bg">
			<div id="bodydiv">
				<div id="bodytitle">
					招就处
					<div>
						<a href="loginoutAction" style="color: #F00;">退出</a>
					</div>
				</div>

				<div id="menudiv">

					<jsp:include page="entrance_header.jsp" />

				</div>
				<div id="content">
					<!--当前位置CSS-->
					<div class="top">
						<div class="topleft">
							<div class="dan">
								<div>
									当前位置>招就处>分数统计
								</div>
							</div>
							<div class="F5">
								<img src="newimages/F5.png" />
							</div>
						</div>
						<div class="topright">
							<div class="toprightmin"></div>
							<div class="toprightmax"></div>
							<div class="toprightclose">
								<div class="toprightclose"
									onclick="if(confirm('是否确定退出！')){location.replace('loginoutAction')}"
									title="点击退出" title="点击退出"></div>
							</div>
						</div>
					</div>
					<!--内容-->
					<div class="condiv">


						<div class="submenu">

						</div>
						<div class="contable">
							<table width="100%" id="d1" border="0">
								<tr>
									<td width="15%" align="right">
										学院：
									</td>
									<td width="10%">
										<select name="" id="collegesList">

										</select>
									</td>
									<td width="15%" align="right">
										专业名称:
									</td>
									<td width="16%">
										<select name="" id="professionsList">
											<option value="">
												--请选择学院--
											</option>
										</select>
									</td>

									<td align="right">
										班级：
									</td>
									<td>
										<select name="" id="classesList">
											<option value="0">
												--请选择专业--
											</option>
										</select>
									</td>
									<td align="right">
										科目：
									</td>
									<td>
										<s:select list="subjects" theme="simple" listKey="subjectsId"
											listValue="subjectsName" id="subject" headerKey=""
											headerValue="所有科目">
										</s:select>
									</td>
									<td>
										<input type="button" value="查找 " onclick="loadInfo()" />
									</td>


								</tr>
							</table>

							<div style="height: 800px; margin-top: 60px">
								<table id="Statisticsdata"
									style="background-color: white; margin-left: auto; margin-right: auto; width: 800px; height: 100px; margin-top: auto"
									class="statisticsdata">
									<caption id="chartTitle" style="font-size: 20px; color: red">
										分数段统计
									</caption>

									<tr id="scoreRange">
										<td style="width: 600px"></td>
										<th>
											400分以上
										</th>
										<th>
											391-400
										</th>
										<th>
											381-390
										</th>
										<th>
											371-380
										</th>
										<th>
											361-370
										</th>
										<th>
											351-360
										</th>
										<th>
											371-380
										</th>
										<th>
											361-370
										</th>
										<th>
											351-360
										</th>
										<th>
											351-360
										</th>

									</tr>

									<tr id="totalNumber">
										<th>
											总人数
										</th>
										<td>
											190
										</td>
										<td>
											200
										</td>
										<td>
											40
										</td>
										<td>
											120
										</td>
										<td>
											30
										</td>
										<td>
											300
										</td>
										<td>
											120
										</td>
										<td>
											30
										</td>
										<td>
											300
										</td>
										<td>
											300
										</td>
									</tr>
									<tr id="registedNumber">
										<th width="500px">
											已报到人数
										</th>
										<td>
											10
										</td>
										<td>
											40
										</td>
										<td>
											30
										</td>
										<td>
											45
										</td>
										<td>
											35
										</td>
										<td>
											49
										</td>
										<td>
											30
										</td>
										<td>
											45
										</td>
										<td>
											35
										</td>
										<td>
											35
										</td>

									</tr>

								</table>
							</div>

						</div>
					</div>

					<div class="condiv"
						style="width: 997px; position: relative; height: 20px; min-height: 20px; text-align: center;">
						<a href="computer/computer.html" target="_blank">计算机学院程序员之家</a>
					</div>
					<!---->


					<!--低部-->
					<div class="bottom">
					</div>

				</div>
	</body>
</html>
